<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no">
<title>{$title}</title>
<link href="{$Think.config.RESOURCEURL}wx_assets/css/webpage.css?v=2013-12-17" rel="stylesheet" type="text/css">
<script src="{$Think.config.RESOURCEURL}wx_assets/js/iscroll.js" type="text/javascript"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
<script type="text/javascript">
	var myScroll;

	function loaded() {
		myScroll = new iScroll(
				'wrapper',
				{
					snap : true,
					momentum : false,
					hScrollbar : false,
					onScrollEnd : function() {
						document.querySelector('#indicator > li.active').className = '';
						document.querySelector('#indicator > li:nth-child('
								+ (this.currPageX + 1) + ')').className = 'active';
					}
				});

	}
	document.addEventListener('DOMContentLoaded', loaded, false);
</script>
</head>
<body id="cate1">
	<div class="banner">
		<div id="wrapper" style="overflow: hidden;">
			<div id="scroller"
				style="width: 1025px; -webkit-transition: 0ms; -webkit-transform: translate3d(0px, 0px, 0px) scale(1);">
				<ul id="thelist">
					<volist name="MainArticles" id="main">
					<li>
						<p>{$main.title}</p> <a href="{$main.url}"><img
							src="{$main.picurl}" style="width: 1025px;"></a>
					</li>
					</volist>
				</ul>
			</div>
		</div>
		<div id="nav">
			<div id="prev"
				onclick="myScroll.scrollToPage('prev', 0,400,1);return false">←
				prev</div>
			<ul id="indicator">
				<volist name="MainArticles" id="main">
				<li class="active">{$i}</li>
				</volist>
			</ul>
			<div id="next"
				onclick="myScroll.scrollToPage('next', 0,400,1);return false">next
				→</div>
		</div>
		<div class="clr"></div>
	</div>

	<ul class="mainmenu">
		<volist name="ModuleArticles" id="module">
		<li>
			<div class="menubtn">
				<if condition="$module.color neq ''">
					<a href={$module.url} style="background-color:{$module.color}">
				<else />
				<a href={$module.url}>
				</if>
					<div class="menumesg">
						<div class="menuimg" style="height: 345.76875px;">
							<img src={$module.picurl}>
						</div>
						<div class="menutitle">{$module.title}</div>
					</div>
				</a>
			</div>
		</li>
		</volist>
		<div class="clr"></div>
	</ul>
<script>
	var bg = "{$randomBackground}";
	if (bg) {
		document.getElementById("cate1").style.backgroundImage = "url(" + bg + ")";
	}
	
	var count = document.getElementById("thelist").getElementsByTagName(
			"img").length;

	var count2 = document.getElementsByClassName("menuimg").length;
	for (i = 0; i < count; i++) {
		document.getElementById("thelist").getElementsByTagName("img")
				.item(i).style.cssText = " width:"
				+ document.body.clientWidth + "px";

	}
	for (i = 0; i < count2; i++) {
		document.getElementsByClassName("menuimg").item(i).style.cssText = " HEIGHT:"
				+ (document.body.clientWidth / 320) * 81 + "px";
	}
	document.getElementById("scroller").style.cssText = " width:"
			+ document.body.clientWidth * count + "px";

	setInterval(function() {
		myScroll.scrollToPage('next', 0, 400, count);
	}, 3500);
	window.onresize = function() {
		for (i = 0; i < count; i++) {
			document.getElementById("thelist").getElementsByTagName("img")
					.item(i).style.cssText = " width:"
					+ document.body.clientWidth + "px";

		}
		for (i = 0; i < count2; i++) {
			document.getElementsByClassName("menuimg").item(i).style.cssText = " HEIGHT:"
					+ (document.body.clientWidth / 320) * 81 + "px";
		}
		document.getElementById("scroller").style.cssText = " width:"
				+ document.body.clientWidth * count + "px";
	}
</script>
<script>
	wx_share.init({
		"title":"{$title}",
		"desc":'{$shareinfo}',
		"link":location.href,
		"imgUrl": '{$sharepicurl}',
		"pkg":{
			"appId": '{$pkg.appId}',
			"timestamp": '{$pkg.timestamp}',
			"nonceStr": '{$pkg.nonceStr}',
			"signature": '{$pkg.signature}'
		},
		success:function(config,shareType){
		}
	});
	</script>
</body>
</html>